<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>swiper.js练习</title>
    <link rel="stylesheet" href="//cdn.66173.cn/mobile/css/yhwz_pc.css?t=1531100179">
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="http://cdn.66173.cn/niuguo/scripts/swiper.jquery.3.4.2.min.js?t=1531100179"></script>
    <style>
        .kk{
            width:120px;height: 20px;
            background-color: #ff684f;
        }
        .jjj{
            width: 100%;height: 30px;border: 1px solid #fffaf1;
        }
        .ll{
            width: 30px;height: 30px;background-color: #ff684f;
        }
    </style>
</head>
<body class="home-page">
<section class="sec sec5" style="background-image: url(//cdn.66173.cn/mobile/css/img/yhwz_pc/bg_05.jpg)">
    <div class="background-img data-swipper-wrapper" style="background-image: url(//cdn.66173.cn/mobile/css/img/yhwz_pc/border_game_data.png)">
        <div class="rotator clearfix">
            <div class="swiper-container swiper-container2">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"><a href="#" target="_blank"><img src="http://cdn.66173.cn/mobile/css/img/yhwz_pc/img_data1.png" alt="" /></a></div>
                    <div class="swiper-slide"><a href="#" target="_blank"><img src="http://cdn.66173.cn/mobile/css/img/yhwz_pc/img_data2.png" alt="" /></a></div>
                    <div class="swiper-slide"><a href="#" target="_blank"><img src="http://cdn.66173.cn/mobile/css/img/yhwz_pc/img_data3.png" alt="" /></a></div>
                    <div class="swiper-slide"><a href="#" target="_blank"><img src="http://cdn.66173.cn/mobile/css/img/yhwz_pc/img_data4.png" alt="" /></a></div>
                </div>
                <!-- Add Pagination -->
                <div class="swiper-pagination swiper-pagination-bullets ">
                    <span class="swiper-pagination-bullet swiper-pagination-bullet-active"></span>
                    <span class="swiper-pagination-bullet"></span>
                    <span class="swiper-pagination-bullet"></span>
                    <span class="swiper-pagination-bullet "></span></div>
            </div>
        </div>
        <div class="dir-btn pre-btn"></div>
        <div class="dir-btn next-btn"></div>
    </div>
</section>
<script>
    window.onload = function() {
        var swiper2 = new Swiper('.swiper-container2', {
        prevButton:'.pre-btn',
        nextButton:'.next-btn',
        autoplay: 2000,
        crossFade: true ,///控制是否自动播放
        preloadImages: false, //是否初始时将所有轮播图加载完,
        lazyLoading: true, //是否图片懒加载，要和preloadImages: false一起使用
        paginationClickable: true,
        autoplayDisableOnInteraction: false ,//控制用户滑动或点击到其他图后是否不再轮播
    });
    }

</script>
</body>

</html>